import React, {Component} from "react";
import store from "../store";
import {List, Button, Input} from "antd";
import Todolist from './TodoList.css'
import {changeValue} from "../store/actions/todoList";

export default class TodoList extends Component {
    constructor() {
        super();
        const storeState = store.getState()
        console.log(storeState)
        this.state = {
            ...storeState,
        }


        //监听
        store.subscribe(() => {
            this.setState({
                ...store.getState()
            })
        })


    }


    handleChang(e) {
        //    修改值  触发一个action
        const action = {
            type: 'changeValue',
            value: e.currentTarget.value
        }
        //触发action
        // store.dispatch(action);
    //    也可以写成
        store.dispatch(changeValue(e.currentTarget.value))
    }


    render() {

        const {value} = this.state;

        const data = [
            'Racing car sprays burning fuel into crowd.',
            'Japanese princess to wed commoner.',
            'Australian walks 100km after outback crash.',
            'Man charged over missing wedding girl.',
            'Los Angeles battles huge wildfires.',
        ];


        return (
            <div>

                <div className='active'>

                    <Input placeholder="输入内容" value={value} onChange={this.handleChang.bind(this)}/>
                    <Button type="primary">发送</Button>
                </div>

                <div>
                    <List
                        header={<div>*****************开始*****************</div>}
                        footer={<div>*****************结尾*****************</div>}
                        bordered
                        dataSource={data}
                        renderItem={item => (
                            <List.Item>
                                {item}
                            </List.Item>
                        )}
                    />
                </div>


            </div>
        );
    }


}